<template>
  <div>
    <el-button
      type="success"
      style="width: 100%;"
      v-google-signin-button="clientId"
    >
      <img
        src="google2.svg"
        class="sidebar-logo"
      />
      <span style="padding-left: 6px;position: relative; bottom: 3px;">
        Login with Google
      </span>
    </el-button>
  </div>
</template>

<script lang="ts">
import GoogleSignInButton from 'vue-google-signin-button-directive/index.js'
import { UserModule } from '@/store/modules/user'
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'GoogleLogin'
})
export default class extends Vue {
  clientId = '316313480674-vepv406u8nr0c6s2etuubhpfeadhmkgo.apps.googleusercontent.com'

  directives = GoogleSignInButton

  async OnGoogleAuthSuccess(idToken: any) {
    // console.log(idToken, 'tokesdasdasd') // 返回第三方结果信息 默认是全token 要用jsonwebtoken 解析
    // Receive the idToken and make your magic with the backend
    const jwt = require('jsonwebtoken')
    const decoded = jwt.decode(idToken)
    // 将google登录用户信息存入cookies
    await UserModule.GoogleLogin(decoded)
    this.$router.push('/')
  }

  OnGoogleAuthFail(error:any) {
    console.log(error)
  }
}
/* export default {
  directives: {
    GoogleSignInButton
  },
  data: () => ({
    clientId: '316313480674-vepv406u8nr0c6s2etuubhpfeadhmkgo.apps.googleusercontent.com'
  }),
  methods: {
    async OnGoogleAuthSuccess(idToken) {
      console.log(idToken, 'tokesdasdasd') // 返回第三方结果信息 默认是全token 要用jsonwebtoken 解析
      // Receive the idToken and make your magic with the backend
      const jwt = require('jsonwebtoken')
      const decoded = jwt.decode(idToken)
      console.log(decoded)
      await UserModule.GoogleLogin(decoded)
      this.$router.push('/')
    },
    OnGoogleAuthFail(error) {
      console.log(error)
    }
  }
} */
</script>

<style>
.google-signin-button {
  width: 10%;
  border-radius: 10px;
  padding: 10px 20px 25px 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
